import React, { Component } from "react";
import NewsLi from "./NewsLi.js";
import qs from "qs";
import {  NavLink } from 'react-router-dom' ;
class NewsList extends Component {
  constructor(props, context) {
    super(props);
    this.state = {
      data: []
    };
    this.changePage = this.changePage.bind(this);
    this.searchData = this.searchData.bind(this);
  }
  componentDidMount() {
    this.searchData();
  }
  searchData(params){
    if(this.refs.keywords){
      var title = this.refs.keywords.value||"";
      params.name = title;
    }
    fetch("/api/news/list", {
        method: "POST",     
        headers: {
            "Content-Type" : "application/x-www-form-urlencoded"
          },
        body:qs.stringify(params)
      })
        .then(res => {
          return res.json();
        })
        .then(data => {
          this.setState({
            data: data
          });
        });
}
changePage(e){
  var params = {};
  var page = e.currentTarget.getAttribute("data-page");
  params.page = page;
  this.searchData(params);
}
  render() {
    const lists=this.state.data
    
    if(!lists.rows){
        return <div>数据加载中...</div>
    }
 
    var pages = 1; //计算分页数，默认是1页
 
    var outputPages = [];
    pages = Math.ceil(lists.total/lists.limit); 
    outputPages.push(<a href="javascript:void(0)"  data-page={lists.page-1>0?lists.page-1:1} onClick={(e) => this.changePage(e)} className="prev disabled" >上一页</a>)
    for(let i=1;i<=pages;i++){
        var onstatus = "";
        if(lists.page == i){
            onstatus = "on";
        }
        outputPages.push(<a key={i} href="javascript:void(0)" data-page={i} className={onstatus} 
        onClick={(e) => this.changePage(e,i)}>{i}</a>)
    }
    outputPages.push(<a href="javascript:void(0)"  data-page={lists.page+1<pages?lists.page+1:pages} onClick={(e) => this.changePage(e)} className="prev disabled" >下一页</a>)

    return (
      <content className="feed-list-container">
        <div>
          <div className="searchDiv">
            <div className="searLeft">
              <form>
                <input
                  type="text"
                  placeholder="请输入关键字"
                    ref="keywords"
                  className="keyinput"
                //   ref="keywords"
                  defaultValue=""
                />
              </form>
            </div>
            <div className="searRight">
              <input
                type="submit"
                onClick={(e)=>this.searchData({})}
                className="fl keysub"
                value="搜索"
                style={{ border: "0px", background: "none", cursor: "pointer" }}
              />
            </div>
          </div>
        </div>
        <div
          className="beta-front-page-header hidden-xs NewsList"
          style={{ width: "80%", margin: " 0 auto" }}
        >
          {this.state.data.rows &&
            this.state.data.rows.map((item, index) => {
              return (
                <NewsLi data={item} key={index}/>
              )
            })}
        </div>
        <div className="page" style={{margin:'20px 0px'}}> 
        {outputPages}         
        </div>
      </content>
    );
  }
}
export default NewsList;
